<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>组件的嵌套</h3>
        <my-comp1></my-comp1>

        <!-- 不能在根组件中使用 -->
        <!-- <my-comp1-btn></my-comp1-btn> -->

    </div>

    <script src="./vue.js"></script>

    <script>
        // 嵌套： components下还有components
        new Vue({
            el: '#app',
            components: {

                
                // MyComp1 中还可以继续定义组件
                MyComp1:{
                    template: `<div> mycomp1 <my-comp1-btn></my-comp1-btn> </div>`,
                    components: {
                        //MyComp1Btn 是 MyComp1内部定义的组件
                        // 只能定义组件的地方去使用，它只能MyComp1中去使用。----- 局部组件
                        MyComp1Btn: {
                            template: `<button>MyComp1Btn</button>`
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>